<div class="panel panel-primary">
  <div class="panel-header">{{'Request Permission'}}</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item" *ngFor="let message of messages;">
      <div class="message-header">
        <img class="avatar" [src]="message.avatar">
        <div class="name">{{message.nickName || message.email}}</div>
        <a class="doc-name" [routerLink]="['/document', message.docId]">{{message.docName}}</a>
      </div>
      <div class="message-content">
        <div class="permission-items">
          <span *ngFor="let p of message.permissionList" class="badge badge-primary">{{ {'1':'read', '2':'delete', '3': 'edit', '4': 'view'}[p] }}</span>
        </div>
        <div class="message-controls text-right">
          <button class="btn btn-sm btn-outline-primary text-capitalize" type="button" (click)="approve(message.id)">{{'approve'}}</button>
          <button class="btn btn-sm btn-outline-danger text-capitalize" type="button" (click)="reject(message.id)">{{'reject'}}</button>
        </div>
      </div>
    </li>
  </ul>
</div>
